/*
 * echart的地图组件
 * @Author: ljb
 * @Date: 2018-10-29 11:43:07
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-10-30 14:33:10
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .map-chart {
        width: 100%;
        height: 100%;
    }
</style>
<template>
	<div
		ref="map_chart"
		class="map-chart"/>
</template>

<script>
import echarts from 'echarts';

/* eslint-disable-next-line */
import china from './china';

export default {
	name: 'EchartMap',
	props: {
		areaData: {	// 传入的数组需要和默认数组的格式一样，name用来定位显示省份名称，value用来显示人数值，selected代表选中，图像会高亮显示，相关文档@link http://echarts.baidu.com/option.html#series-map.data.selected
			type: Array,
			default() {
				return [
					{
						name: '广东',
						value: 0,
						selected: true,
						percent: '0%',
					},
				];
			},
		},
	},
	data() {
		return {
			map_chart: null,
		};
	},
	watch: {
		areaData(data) {
			if (data.length > 0) {
				this.initEchart(data);
			}
		},
	},
	mounted() {
		this.map_chart = echarts.init(this.$refs.map_chart);

		this.initEchart(this.areaData);
	},
	methods: {
		/**
		 * 初始化echart
		 * @return {undefined}
		 */
		initEchart(area_data) {
			const option = {
				title: {
					text: '地域分布',
					left: 'center',
					show: false,
				},
				tooltip: {
					trigger: 'item',
					formatter(param) {
						if (param.data) {
							return `${param.data.value} 人(${param.data.percent})`;
						}
						return '0 人(0%)';
					},
				},
				visualMap: {
					left: '30',
					// min: 0,
					// max: 1500,
					inRange: {
						color: ['#f0f2ff', '#617bff'], // 002aff f0f2ff
					},
					calculable: true,
				},
				series: [
					{
						name: 'people',
						type: 'map',
						mapType: 'china',
						roam: true,
						top: 0,
						bottom: 0,
						itemStyle: {
							normal: {
								areaColor: '#f0f2ff',
								borderColor: '#fff',
								borderWidth: 1,
							},
							emphasis: {
								areaColor: '#96a7fe',
							},
						},
						label: {
							normal: {
								show: true,
								color: '#B2B2B2',
							},
							emphasis: {
								show: true,
								color: '#555555',
							},
						},
						data: area_data,
					},
				],
			};

			this.map_chart.setOption(option);
		},
	},
};
</script>
